<!-- Created by henian.xu on 2018/11/27. -->

<template>
    <div :class="classes"><slot/></div>
</template>

<script>
export default {
    name: 'Column',
    props: {
        span: {
            type: Number,
            default: 1,
        },
    },
    computed: {
        classes() {
            return ['column', `col-${this.span}`];
        },
    },
};
</script>

<style lang="scss">
.column {
    float: left;
    padding-left: ($grid-spacing / 2);
    padding-right: ($grid-spacing / 2);

    @for $i from 1 through $grid-column {
        &.col-#{$i} {
            width: (100% / $grid-column * $i);
        }
    }
    /* 暂无用 */
    @for $i from 1 through 10 {
        &.col-#{$i * 10%}per {
            width: ($i * 10%);
        }
    }
}
</style>
